
<!-- Copyright IBM Corp, All Rights Reserved.

SPDX-License-Identifier: Apache-2.0
-->

<div class="uk-grid uk-margin-large-top uk-grid-medium">
	<div class="uk-text-center">
		<% if (health >= 90) { %>
		<div class="uk-text-truncate uk-margin-bottom perfect-health-square">
			<label class="font-size-15">Fabric</label>
			<div class="uk-vertical-align health-label-box">
				<label class="uk-vertical-align-middle perfect-label health">Perfect</label>
			</div>
		</div>
		<% } else if (health >= 80) { %>
		<div class="uk-text-truncate uk-margin-bottom good-health-square">
			<label class="font-size-15">Fabric</label>
			<div class="uk-vertical-align health-label-box">
				<label class="uk-vertical-align-middle good-label health">Good</label>
			</div>
		</div>
		<% } else { %>
		<div class="uk-text-truncate uk-margin-bottom attention-health-square">
			<label class="font-size-15">Fabric</label>
			<div class="uk-vertical-align health-label-box">
				<label class="uk-vertical-align-middle attention-label health">Attention</label>
			</div>
		</div>
		<% } %>
		<label class="font-size-20">Health</label>
	</div>
	<div class="uk-vertical-align">
		<div class="uk-vertical-align-middle vertical-line" style="margin-bottom:37px;"></div>
	</div>
	<div class="uk-text-center">
		<div style="height:156px;" class="uk-vertical-align uk-margin-bottom">
			<label class="uk-vertical-align-middle font-size-50 blockNum">${blockNum}</label>
		</div>
		<label class="font-size-20">Blocks</label>
	</div>
	<div class="uk-vertical-align">
		<div class="uk-vertical-align-middle vertical-line" style="margin-bottom:37px;"></div>
	</div>
	<div class="uk-text-center">
		<div style="height:156px;" class="uk-vertical-align uk-margin-bottom">
			<label class="uk-vertical-align-middle avgBlockTime">${avgBlockTime}</label>
		</div>
		<label class="font-size-20">Avg Block Time</label>
	</div>
	<div class="uk-vertical-align">
		<div class="uk-vertical-align-middle vertical-line" style="margin-bottom:37px;"></div>
	</div>
	<div class="uk-text-center">
		<div style="height:156px;" class="uk-vertical-align uk-margin-bottom">
			<label class="uk-vertical-align-middle minBlockTime">${minBlockTime}</label>
		</div>
		<label class="font-size-20">Min Block Time</label>
	</div>
	<div class="uk-vertical-align">
		<div class="uk-vertical-align-middle vertical-line" style="margin-bottom:37px;"></div>
	</div>
	<div class="uk-text-center">
		<div style="height:156px;" class="uk-vertical-align uk-margin-bottom">
			<label class="uk-vertical-align-middle maxBlockTime">${maxBlockTime}</label>
		</div>
		<label class="font-size-20">Max Block Time</label>
	</div>
</div>
<hr class="uk-grid-divider">
<div class="uk-grid uk-margin-top">
	<div class="uk-width-2-5" style="width:37%;">
		<table class="uk-table uk-table-striped uk-table-hover">
			<thead>
				<tr style="display:block;">
					<th style="width:28%;border:0;">Block</th>
					<th style="width:39%;border:0;">Block Time</th>
					<th style="border:0;">Create Time</th>
				</tr>
			</thead>
			<tbody style="display:block;height:265px;overflow:auto;"></tbody>
		</table>
	</div>
	<div class="uk-width-3-5 uk-padding-remove" style="width:63%;">
		<div class="canvas" style="height:300px;"></div>
	</div>
</div>